<!--
 * @Description: 
 * @Author: 晋龍
 * @Date: 2021-07-12 16:47:39
 * @LastEditors: 晋龍
 * @LastEditTime: 2021-07-13 18:55:40
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行游天下——学生风采详情</title>
    <link rel="stylesheet" href="css/fengcai.css">
     <!-- 从静态资源服务器引入jQuery  bootcdn 加速服务-->
  <script type="text/javascript" src="js/jquery.js">
    // <script type="text/javascript" src="js/jquery.js">
    </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
<div id="details">

    <!-- 头部 -->
    <div class="header">
        <div class="headLeft">
          <div class="logo" @click="toIndex()">
            行学天下
          </div>
          <div class="title" @click="toIndex()">
            行学天下
          </div>
        </div>
        <div class="headRight">
          <div class="callMe">
            <a href="#callMe">
              <img src="image/callMe.png" alt="图片丢失了">
              联系我们
            </a>
          </div>
        </div>
    </div>

    <!-- {{projectDetails}} -->
    <div class="main">
        <div class="page">
            <div class="content">
                <div class="title">{{projectDetails.title}}
                </div>
                <div class="time">{{formatDate(projectDetails.beginTime)}}&nbsp;&nbsp;|&nbsp;&nbsp;{{projectDetails.category.name}}&nbsp;&nbsp;|&nbsp;&nbsp;{{projectDetails.baseUser.realname}}&nbsp;&nbsp;|&nbsp;&nbsp;阅读次数：{{projectDetails.readTimes}}
                </div>
                <div class="textContent" v-html="projectDetails.content">
                    {{htmlToText(projectDetails.content)}}
                </div>        
            </div>
            <div class="teacher">
                <div class="title">
                </div>
                <div class="details">
                <!-- {{projectDetails.telephone}}
                    {{projectDetails.}} -->
                </div>    
            </div>
            <div class="toIndex" @click="toIndex()">
                <div class="myBtn" @click="toIndex()">点击此处返回首页</div>
            </div>
        </div>
         <!-- 返回顶部 -->
       <el-backtop :bottom=200>
    </el-backtop>
    </div>
    
    <!--页面底部信息-->
    <div class="footer">
        <div id="callMe" class="callMe">联系我们（工作时间：9:00-17:30）021-56778147
            <a href="https://briup.cn">http://briup.cn</a>
            <!-- 通过qq实现在线客服功能 -->
            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1729448763&Site=%e6%9d%b0%e6%99%ae&Menu=yes">在线客服</a>
        </div>
        <div class="beiAn">
            <a href="http://beian.miit.gov.cn">京ICP备123456789号</a>
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo">公安备案号00000000</a>
        </div>
        <div class="callMe">
            ©1999-2021杰普软件科技有限公司
        </div>  
    </div>
</div>
</body>
<script>
    new Vue({
        el:'#details',
        data:{
            projectDetails:[],
        },
        created(){
            var id = window.location.search.split('=')[1];
            console.log(id);
            axios.get('http://47.94.46.113:8888/index/article/findById?id=' + id).then((res) => {this.projectDetails = res.data.data
            })
                
        },
        methods: {
            // 将时间戳格式化
            formatDate(date) {
            return moment(date).format('YYYY-MM-DD')
            },
            
            //将html转话成正常文本
            htmlToText(html){
                return html.replace(new RegExp('<.+?>','g'),'')
            },

            //返回首页
            toIndex(id){
                window.location.href="index.html?id="+id;
            },
        }
    })
    </script>
    </html>